<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nightscout BG NOW</title>
  <link href="/images/round1.png" rel="icon" id="favicon" type="image/png" />
  <link rel='stylesheet' type='text/css' href='/css/main.css' />
  <style type="text/css">
  	@import url("//fonts.googleapis.com/css?family=Open+Sans:700");
    body {
		text-align: center;
		margin: 0 0;
		padding: 0;
		overflow: hidden;
		font-family: 'Open Sans';
	}
	main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		height: 100vh;
	}
    .center {
		width: 100%;
		-webkit-transform: translateY(-3%);
    }
    h1 {
		font-weight: 700;
		font-size: 50vmin;
    }
    .stale {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
	<main>
		<div class="center">
			<h1 class="bgnow"></h1>
		</div>
	</main>
  <script src="/api/v1/status.js"></script>
  <script src="/js/bundle.js?v=<%= locals.cachebuster %>"></script>
  <script type="text/javascript">
    function query ( ) {
      console.log('query');
      $.ajax('/api/v1/entries/current.json', { success: render });
    }

    function render (xhr) {
      console.log('xhr', xhr);
      var rec = xhr[0];
      var last = new Date(rec.date);
      var now = new Date( );
      if (window.serverSettings.settings.units == 'mmol') {
        rec.sgv = Nightscout.units.mgdlToMMOL(rec.sgv);
      }
      $('.bgnow').text(rec.sgv);
      var threshold = 1000 * 60 * 13;
      $('.bgnow').toggleClass('stale', (now - last > threshold));
    }

    function init ( ) {
      console.log('init');
      query( );
      setInterval(query, 1 * 60 * 1000);
    }

    init( );
  </script>
</body>
</html>

